<link rel="stylesheet" href="/static/libs/editormd/css/editormd.min.css"/>
<form id="ajaxForm" class="form-horizontal">

    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>文章内容
            </h5>
        </div>
        <div class="ibox-content">
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-12">
                        <div id="editormd">
                            <textarea name="content" style="display:none;">#(article.content)</textarea>
                        </div>
                    </div>

                </div>
            </div>


        </div>
    </div>
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>基本信息
                <small>当前编辑id:#(article.id)</small>

            </h5>
        </div>
        <div class="ibox-content">
            <div class="form-group">
                <label class="col-sm-2 control-label">ID</label>

                <div class="col-sm-10">
                    <p name="id" class="form-control-static">#(article.id)</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">创建时间</label>

                <div class="col-sm-10">
                    <p class="form-control-static"> #date(article.create_time ??,'yyyy-MM-dd HH:mm:ss')</p>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">最后更新时间</label>

                <div class="col-sm-10">
                    <p class="form-control-static"> #date(article.last_updata_time ??,'yyyy-MM-dd HH:mm:ss')</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">最后更新用户名</label>

                <div class="col-sm-10">
                    <p name="id" class="form-control-static">#(article.last_updata_acct ??)</p>
                </div>
            </div>

            <div class="form-group hidden">
                <div class="row">
                    <label class="col-sm-2 control-label">ID</label>

                    <div class="col-sm-4">
                        <input name="id" type="text" placeholder=".col-md-2" class="form-control" value='#(article.id)'>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="row">
                    <label class="col-sm-2 control-label">文章标题</label>

                    <div class="col-sm-4">
                        <input name="title" type="text" placeholder="文章标题" class="form-control"
                               value='#(article.title)'>
                    </div>
                    <span class="help-block m-b-none">请务必填写文章标题</span>

                </div>
            </div>
            <div class="form-group">
                <div class="row">
                    <label class="col-sm-2 control-label">文章连接</label>

                    <div class="col-sm-4">
                        <input name="name" type="text" placeholder="文章连接" class="form-control"
                               value='#(article.url)'>
                    </div>
                    <span class="help-block m-b-none">(可选)</span>

                </div>
            </div>

            <div class="form-group">
                <div class="row">
                    <label class="col-sm-2 control-label">精华置顶</label>

                    <div class="col-sm-4">
                        <label class="checkbox-inline i-checks">
                            <input id="is_quintessence" name="is_quintessence" type="checkbox"> 精华</label>
                        <label class="checkbox-inline i-checks">
                            <input id="is_top" name="is_top" type="checkbox"> 置顶</label>
                    </div>
                    <span class="help-block m-b-none">(可选)</span>

                </div>
            </div>

            <div class="form-group">
                <div class="row">
                    <label class="col-sm-2 control-label">备注</label>

                    <div class="col-sm-4">
                        <input name="desc" type="text" placeholder="备注" class="form-control" value='#(article.desc)'>
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="row">
                    <label class="col-sm-2 control-label">是否启用</label>

                    <div class="col-sm-4">

                        #if("on".equals(article.is_open))
                        <input name="is_open" type="checkbox" class="js-switch" checked/>
                        #else
                        <input name="is_open" type="checkbox" class="js-switch"/>
                        #end
                    </div>
                </div>
            </div>

            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-2">
                    <button class="btn btn-primary" id="ajaxSubmit" type="button">保存内容</button>
                </div>
            </div>
        </div>
    </div>

</form>

<script src="/static/libs/editormd/editormd.min.js"></script>
<script>

    $(function () {

        var editor = editormd("editormd", {
            path: "/static/libs/editormd/lib/", // Autoload modules mode, codemirror, marked... dependents libs path
            height: 640,
            onfullscreen: function () {
                var oDiv = document.getElementById('editormd');
                oDiv.style.zIndex = 9999;   //这时候你在审查div这个元素的时候，发现z-index的值为10；
            },
            onfullscreenExit: function () {
                var oDiv = document.getElementById('editormd');
                oDiv.style.zIndex = 0;   //这时候你在审查div这个元素的时候，发现z-index的值为10；
            }
        });

        $("#is_quintessence").attr("#(article.is_quintessence ?? == 'on' ? 'checked':'off')", "");
        $("#is_top").attr("#(article.is_top ?? == 'on' ? 'checked':'off')", "");


        $("#ajaxSubmit").on("click", function () {
            var form = $("#ajaxForm");
            var formData = form.serializeObject();
            console.log(JSON.stringify(formData));


            $.ajax({
                type: "POST",
                url: "postEdit",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(formData),
                dataType: "json",
                success: function (data) {
                    if (200 === data.code) {
                        showToast("保存成功", function () {
                            closePop();
                        });
                    } else {
                        swal("操作失败", "错误信息:" + data.msg, "error");

                    }
                },
                error: function (data) {
                    $("#ajaxSubmit").html("提交数据失败！");
                }
            });

        });


        //自定义样式
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });

        //仿IOS切换按钮
        var elem = document.querySelector('.js-switch');
        var switchery = new Switchery(elem, {
            color: '#1AB394'
        });

    });

</script>


